<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
 <style>
   *{
     margin: 0;
     padding: 0;
   }
   body{
     background-color: cadetblue;
   }
   img{
     width: 100px;
     height: 100px;
     position: absolute;
   }
   .roate{
     transform: rotateY(180deg);
   }
   
 </style>
</head>
<body>
  <img src="xn.png" alt="">
  <script>
    var img = document.querySelector('img');
    var step = 10;
    var img_x = 0;
    var img_y = 0;
    document.addEventListener('keydown',function(e){
      // console.dir(e)
      if(e.keyCode == 40){
        img_y = img_y + step; 
      }else if(e.keyCode == 38){
        img_y = img_y - step;
      }else if(e.keyCode == 37){
        img_x = img_x - step;
        img.className = 'roate';
      }else if(e.keyCode == 39){
        img_x = img_x + step;
        img.className = '';
      }else{
        alert('哥们需要使用箭头键');
      }
     
      img.style.top = img_y + 'px';
      img.style.left = img_x + 'px';
    })
  </script>
</body>
</html>